<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <SearchBar :show-search="true">
      <template slot="peopleSearch">
        <el-form-item label="人员搜索：">
          <el-row type="flex">
            <el-input placeholder="请输入" style="width: 300px;" />
          </el-row>
        </el-form-item>
      </template>
    </SearchBar>
    <!-- 新增 -->
    <el-card>
      <!-- 新增按钮 -->
      <el-row>
        <el-col>
          <el-button type="warning">
            <i class="el-icon-circle-plus-outline" /> 新增</el-button>
        </el-col>
      </el-row>
      <!-- 表格表单 -->
      <el-row>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%;padding-top: 20px; "
          :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="180"
          />
          <el-table-column
            prop="name"
            label="人员名称"
            width="180"
          />
          <el-table-column
            prop="address"
            label="归属地址"
          />
          <el-table-column
            prop="role"
            label="角色"
          />
          <el-table-column
            prop="mobile"
            label="联系电话"
          />
          <el-table-column

            label="操作"
            width="100"
          >
            <template>
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small" style="color: red;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import { getPeopleAPI, getRolesAPI } from '@/api/people'
export default {
  components: {
    SearchBar
  },
  data() {
    return {
      tableData: [{
        id: '1',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        role: '维修员',
        mobile: '010-6666666'
      }, {
        id: '2',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        role: '维修员',
        mobile: '010-6666666'
      }, {
        id: '3',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        role: '维修员',
        mobile: '010-6666666'
      }, {
        id: '4',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        role: '维修员',
        mobile: '010-6666666'
      }],
      pageConfig: {
        pageIndex: 1,
        pageSize: 5
      }
    }
  },
  created() {
    this.getPeople()
    this.getRoles()
  },
  methods: {
    async  getPeople() {
      const res = await getPeopleAPI(this.pageConfig)
      console.log(res)
    },
    // 获取角色列表数据
    async getRoles() {
      const res = await getRolesAPI()
      console.log(res)
    }
  }

}
</script >

<style lang="scss" scoped>
.el-table__header {
  background-color: aqua;
}
</style>
